<link rel="stylesheet" type="text/css" href="<?php echo css_url().'user_group3/login-signup.css'?>">
<div id="body-signup">
    
    <p class="heading">Sign up for free!</p>
    
    <button id="facebook-signup" > 
        <span>Sign up with Facebook</span>
    </button>

    <div class="hr"></div>
    
    <form id="signup-form" action='' method='POST' >
        <ol>
            <li>
                <input class="text" id="email" type="text" placeholder="Email" name='email'/>          
                <span class="error" id="email-error"></span>
            </li>
            
            <li>
                <input class="text" id="password" type="password" placeholder="Password" name='password'/>
                <span class="error" id="password-error"></span>
            </li>
            
            <li>
                <input class="text" id="cpassword" type="password" placeholder="Confirm Password"/>
                <span class="error" id="cpassword-error"></span>
            </li>
            
            <li>
                <strong>I'm looking for</strong>
                <div style="width:100%; float:left;">
                    <div class='btn'>
                        <div class='radio'>
                            <input class="radio-btn" id='looking-to-hire' type='radio' name='looking' value='hire'/>
                            <span>Hire</span>
                        </div>
                    </div>

                    <div class='btn'>
                        <div class='radio'>
                            <input class="radio-btn" id='looking-to-work' checked="checked" type='radio' name='looking' value='work'/>
                            <span>Work</span>
                        </div>
                    </div>
                </div>
            </li>
            
            <li>
                <div id="signup-bt">Sign up</div>
                
            </li>
        </ol>
        
    </form>
    
</div>

<?php include js_url(true).'validate_things.php'; ?>

<script>
    
    $("document").ready(function(){
        $("#body-signup").hide();
        $("#body-signup").show("fast");
        
        $("#signup-bt").on("click",function(){   
            var email = $("#email").val();
            var password = $('#password').val();
            var cpassword = $('#cpassword').val();
            var type = $('input:radio[name=looking]:checked').val();
            var isPass = true;
            if(IsEmail(email) === false){
                $("input#email").attr("class","text-error");
                $("span#email-error").text("Wrong email format. Ex: abc@xyz.xxx");
                isPass = false;
            }
            else if(VerifyEmail($("#email").val()) === false){
                $("input#email").attr("class","text-error");
                $("span#email-error").text("This email's already exist");
                isPass = false;
            }                     
            if(IsPasswordValid(password) === false){
                $("input#password").attr("class","text-error");
                $("span#password-error").text("6-20 characters, 1 upper, 1 lower, 1 digit");
                isPass = false;
            }
            
            if(password  !== cpassword){
                $("input#cpassword").attr("class","text-error");
                $("span#cpassword-error").text("Password does not match");
                isPass= false;
            }
            if(isPass){
                    md5pass = md5(password);
                    $("#password").val(md5pass);
                    $("#signup-form").attr('action','<?php echo site_url().'/user_group3/signup/pre_signup'?>')
                    $("#signup-form").submit();
            }
        });
        
        $("input#email").on("keyup", function(){
            if(IsEmail($("#email").val()) === false){
                $("input#email").attr("class","text-error");
                $("span#email-error").text("Wrong email format. Ex: abc@xyz.xxx");
            }

            else{
                $("input#email").attr("class","text");
                $("span#email-error").text("");
            }
        });
        
        $("input#email").on("change", function(){
            if(IsEmail($("#email").val()) === false){
                $("input#email").attr("class","text-error");
                $("span#email-error").text("Wrong email format. Ex: abc@xyz.xxx");
            }
            else if(VerifyEmail($("#email").val()) === false){
                $("input#email").attr("class","text-error");
                $("span#email-error").text("This email's already exist");
            }
            else{
                $("input#email").attr("class","text");
                $("span#email-error").text("");
            }
        });
        
        $("input#password").on("keyup change", function(){
            if(IsPasswordValid($("#password").val()) === false){
                $("input#password").attr("class","text-error");
                $("span#password-error").text("6-20 characters, 1 upper, 1 lower, 1 digit");
            }
            else{
                $("input#password").attr("class","text");
                $("span#password-error").text("");
            }
            
            if($("input#password").val()  !== $("input#cpassword").val()){
                $("input#cpassword").attr("class","text-error");
                $("span#cpassword-error").text("Password does not match");
            }
            else{
                $("input#cpassword").attr("class","text");
                $("span#cpassword-error").text("");
            }
        });
        
        $("input#cpassword").on("keyup change", function(){
            if($("input#password").val()  !== $("input#cpassword").val()){
                $("input#cpassword").attr("class","text-error");
                $("span#cpassword-error").text("Password does not match");
            }
            else{
                $("input#cpassword").attr("class","text");
                $("span#cpassword-error").text("");
            }
        });
    });
    
</script>